<template>
	<view>
		<view class="item" v-for="i in team" :key="i.id">
			<view class="parent">
				<view class="flex-row align-center left">
					<u-avatar :src="i.member.full_portrait" size="72"></u-avatar>
					<view class="name u-line-1">{{i.member.nickname}}</view>
				</view>
				<view class="flex-row justify-end align-center right">
					<view class="jixiao u-line-1">+{{i.performance}}</view>
					<view class="icon" @click="current=(current==i.id?0:i.id)">
						<u-icon name="arrow-down" v-if="current!=i.id" size="32" color="rgba(153, 153, 153, 1)"></u-icon>
						<u-icon name="arrow-up" v-if="current==i.id" size="32" color="rgba(153, 153, 153, 1)"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="children" :style="{height:current==i.id?i.child.length*110+'rpx':0}">
				<view class="parent child" v-for="j in i.child" :key="j.id">
					<view class="flex-row align-center left">
						<u-avatar :src="j.member.full_portrait" size="56"></u-avatar>
						<view class="name u-line-1">{{j.member.nickname}}</view>
					</view>
					<view class="flex-row justify-end align-center right">
						<view class="jixiao u-line-1">+{{j.performance}}</view>
						<view class="icon"></view>
					</view>
				</view>
			</view>
		</view>
		
		<my-nodata v-if="nodata" text="还 没 有 小 伙 伴 , 快 去 邀 请 一 个 吧 ."></my-nodata>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				team: [],
				nodata: false,
				current: 0
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.$u.get('/member/team').then(res => {
					let { team } = res.data.result
					this.team = team
					if (this.team.length==0) this.nodata = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		margin-top: 16rpx;
	}
	.children {
		transition: height 0.5s;
		overflow: hidden;
	}
	.parent {
		width: 750rpx;
		height: 110rpx;
		background: rgba(255, 255, 255, 1);
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		
		&.child {
			padding: 0 40rpx 0 60rpx;
			.name {
				font-size: 26rpx;
			}
		}

		.name {
			font-size: 30rpx;
			margin-left: 16rpx;
		}
		.left,
		.right {
			width: 330rpx;
		}

		.jixiao {
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(255, 139, 86, 1);
		}
		.icon {
			width: 64rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
